<!DOCTYPE html>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page session="false" %>
<html ng-app>

<jsp:include page="../fragments/head.jsp"/>

<body>

<jsp:include page="../fragments/header.jsp"/>


<div class="content-wrapper">
    <div class="sub_header_bar">
        <div class="content_panel">
            <div id="general_prompt">
                <form method="POST" action="/crm/search">
                    <%--<form ng-submit="search()">--%>
                    <div id="general_prompt_logo">
                        <img src='/resources/web/image/headerSearchLogo.png'/>
                    </div>
                    <div id="general_prompt_holder">
                        <input id="general_prompt_input" class="answer_field ask" name="question" value="${question}"/>
                        <%--<input id="general_prompt_input" title="Ask me anything!" class="answer_field ask"--%>
                        <%--autocomplete="off" type="text" name="input" value="Where am i?"/>--%>

                    </div>
                    <input type="image" class="tk_q_submit" name="ask"
                           src="/resources/web/image/headerSearchBtn.png"
                           id="general_submit" value="answer">
                    <%--</form>--%>
                </form>
            </div>
        </div>
    </div>
    <div id="tk_content" class="content_panel">
        <div id="tk_basic" class='cols3-maincenter'>
            <div class="col1">
                <div id='answermainleadin' class='grid_3'>
                    &nbsp;
                </div>
            </div>
            <div class="col2">
                <div id='answermainanswer' class='grid_6'>
                    <div id="tk_answer_main">
                        <div id="tk_answer_q_content">
                            <span class="box answer-top"><span class="right"></span></span>

                            <c:if test="${response.status == 'error'}">
                                <div class="tk_no_answer">
                                    <p class="tk_not_understood">${response.error_message}</p>
                                </div>
                            </c:if>

                            <c:if test="${response.status != 'error'}">

                                <div class="question_repeater">
                                    <div id="query_asked_label">You asked:</div>
                                    <h1 id="query_asked" class="tk_repeated_question">
                                            ${question}</h1>
                                </div>

                                <c:if test="${response.structured_result.result.size() == 0}">
                                    <div class="single_answer">
                                        <li class="tk_object">
                                            <div class="tk_object_details">
                                                <div class="tk_common">
                                                    <a href="#" title="answer ">${response.text_result}</a>
                                                </div>
                                                <div class="tk_urs"><p><%--a sub answer goes here--%></p></div>
                                            </div>
                                        </li>
                                    </div>
                                </c:if>

                                <c:if test="${response.structured_result.result.size() > 0}">
                                    <ul class="tk_object_list">
                                        <c:forEach var="result" items="${response.structured_result.result}">
                                            <c:set var="string1" value="${fn:replace(result.id,'[', '')}"/>
                                            <c:set var="displayName" value="${fn:replace(string1,']', '')}"/>

                                            <li class="tk_object">
                                                <figure>
                                            <span class='tk_object_image_holder'>
                                              <img class="tk_object_image" src="${result.getImageUrl()}"/>
                                                <figcaption></figcaption>
                                            </span>
                                                </figure>
                                                <div class="tk_object_details">
                                                    <div class="tk_common">
                                                        <a href="#" title="answer ">${displayName}</a>
                                                    </div>
                                                    <c:if test="${response.num_results == 1}">
                                                        <div class="tk_urs"><p>${response.text_result}</p></div>
                                                    </c:if>
                                                </div>
                                            </li>
                                        </c:forEach>
                                    </ul>
                                </c:if>

                                <div class="answer_footer">
                                    <span class="actionbox-top"></span>
                                        <%--<span id="query_asked" style="display: none">What is the capital of France?</span>--%>
                                </div>
                            </c:if>

                            <span class="box answer-bottom"><span class="right"></span></span>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col3">
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>

<jsp:include page="../fragments/fotter.jsp"/>

</body>
</html>
